<template>
    <div style="padding: 10px" class="order-query">
        <div class="search-area">
            <Row :gutter="20">
                <i-col span="5">
                    <Input placeholder="请输入采购合同号" size="large" v-model="searchForm.purchasingAgreementCode" @on-enter="search">
                        <Icon slot="prefix" type="ios-cart-outline" />
                    </Input>
                </i-col>
                <i-col span="5">
                    <Select size="large" placeholder="请选择货源方" clearable filterable v-model="searchForm.entrustedEnterprise">
                        <Icon slot="prefix" type="ios-cart-outline" color="#f68f42" style="font-weight: 700;" size="20" />
                        <i-option v-for="(item, index) in dictInfo.customerId" :key="index" :value="item.dictValue">{{ item.dictName }}</i-option>
                    </Select>
                </i-col>
                <i-col span="5">
                    <DatePicker v-model="searchForm.contractValidityPeriod" size="large" type="daterange" placeholder="请选择合同期限" split-panels style="width: 100%;"></DatePicker>
                </i-col>
                <i-col span="5">
                    <Select size="large" placeholder="请选择订单状态" clearable filterable multiple v-model="searchForm.orderStatus">
                        <i-option v-for="(item, index) in statusList" :key="index" :value="item.value">{{ item.text }}</i-option>
                    </Select>
                </i-col>
                <i-col span="4">
                    <Button class="search-btn" shape="circle" size="large" @click="search">查询</Button>
                    <Button class="add-btn" shape="circle" size="large">新增</Button>
                </i-col>
            </Row>
        </div>
        <div class="content">
            <Scroll :on-reach-bottom="handleReachBottom" :height="s_height" v-loading="loading" v-if="tableData.list && tableData.list.length > 0">
                <data-card v-for="item in tableData.list" :key="item.id" :data="item" :dictInfo="dictInfo"></data-card>
            </Scroll>
        </div>
    </div>
</template>

<script>
import DataCard from './dataCard';
import $ from 'jquery';
import api from '@/api/order';
import baseCodeApi from '@/api/baseCode';
export default {
    name: 'goodsInStock',
    components: {
        DataCard
    },
    data() {
        return {
            loading: false,
            searchForm: {},
            tableData: {
                pageNum: 1,
                pageSize: 10,
                filterList: [],
                list: [
                    {
                        speedOfProgressShow: false
                    }
                ]
            },
            s_height: $(window).height() - 180,
            screenWidth: null,
            timer: null,
            dictInfo: {
                customerId: []
            },
            statusList: [
                {
                    text: '草稿',
                    value: '0'
                },
                {
                    text: '审批中',
                    value: '1'
                },
                {
                    text: '被驳回',
                    value: '2'
                },
                {
                    text: '执行中',
                    value: '3'
                },
                {
                    text: '完成',
                    value: '4'
                },
                {
                    text: '异常完结审批中',
                    value: '5'
                },
                {
                    text: '异常完结',
                    value: '6'
                },
                {
                    text: '已完结',
                    value: '7'
                },
                {
                    text: '已提交',
                    value: '8'
                },
                {
                    text: '已接收',
                    value: '9'
                },
            ]
        };
    },
    methods: {
        initData() {
            return new Promise(resolve => {
                let body = {
                    pageNum: this.tableData.pageNum,
                    pageSize: this.tableData.pageSize,
                    filterList: this.tableData.filterList
                }
                if (this.searchForm.orderStatus && this.searchForm.orderStatus.length > 0) {
                    body.orderStatusList = this.searchForm.orderStatus;
                }
                api.selectWorkOrderOrder(body).then(({ data }) => {
                    if (data.returnCode === 200) {
                        this.tableData.list = data.returnData.pageInfo.list;
                        resolve();
                    } else {
                        this.$Message.error(data.returnMsg);
                    }
                }).finally(() => {
                    this.loading = false;
                });
            });
        },
        handleReachBottom() {
            return new Promise(resolve => {
                this.tableData.pageSize += 10;
                this.initData().then(() => {
                    resolve();
                });
            });
        },
        getDictData() {
            baseCodeApi.getOftenTypeByUserId().then(({ data }) => {
                if (data.returnCode === 200) {
                    this.dictInfo.matType = data.returnData.map(i => {
                        return {
                            dictName: i.matTypName,
                            dictValue: i.matTypCode
                        };
                    });
                } else {
                    this.$Message.error(data.returnMsg, 'error');
                }
            }).catch(err => {
                console.log(err);
            });
            baseCodeApi.getContractDictData().then(({ data }) => {
                if (data.returnCode === 200) {
                    const { platformWarehouseList, customerList } = data.returnData;
                    this.dictInfo.whCode = platformWarehouseList.map(i => {
                        return {
                            dictName: i.whName,
                            dictValue: i.id
                        };
                    });
                    this.dictInfo.customerId = customerList.map(i => {
                        return {
                            dictName: i.customerName,
                            dictValue: i.id,
                            customerCode: i.customerCode
                        };
                    });
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).catch(err => {
                console.log(err);
            });

            // 字典
            baseCodeApi.getDictDataByDictTypeList([
                'CONTRACT_STATUS',
                'INVOICE_TYPE',
                'FLIE_TYPE',
                'BUSINESS_TYPE',
                'FEE',
                'BILL_TYPE',
                'ORDER_BUSINESS_TYPE',
                'AGENCY_FEE_TYPE',
                'REPAYMENT_TYPE',
                'RELEASE_TYPE',
                'CHARGE_DIMENSION',
                'DEDUCTION_METHOD',
                'CHARGING_METHOD',
                'PaymentMethod',
                'PAY_COLLECT_FLAG',
                'TRADE_TYPE',
                'TRANS_STATUS',
                'TRADE_MODE',
                'CHARGE_STATUS',
                'DAMAGED_SIGN',
                'CIRCULATION_STATUS',
                'PAYMENT_STATUS',
                'CIRCULATION_TYPE',
                'BILL_STATUS'
            ]).then(({ data }) => {
                if (data.returnCode === 200) {
                    const { returnData } = data;
                    // dataInfo.menuList = data.returnData.filter(item => item.dictType === 'CONTRACT_STATUS');
                    this.dictInfo.dictArr = returnData;
                    this.dictInfo.contractStatus = returnData.filter(item => item.dictType === 'CONTRACT_STATUS');
                    this.dictInfo.businessType = returnData.filter(item => item.dictType === 'ORDER_BUSINESS_TYPE');
                    this.dictInfo.agencyFeesCalType = returnData.filter(item => item.dictType === 'AGENCY_FEE_TYPE');
                    this.dictInfo.repaymentType = returnData.filter(item => item.dictType === 'REPAYMENT_TYPE');
                    this.dictInfo.tradeMode = returnData.filter(item => item.dictType === 'TRADE_MODE');
                    this.dictInfo.releaseType = returnData.filter(item => item.dictType === 'RELEASE_TYPE');
                    this.dictInfo.measureUnit = returnData.filter(item => item.dictType === 'CHARGE_DIMENSION');
                    this.dictInfo.invotp = returnData.filter(item => item.dictType === 'INVOICE_TYPE');
                    this.dictInfo.fileType = returnData.filter(item => item.dictType === 'FLIE_TYPE');
                    this.dictInfo.earnestMoneyDeductionMethod = returnData.filter(item => item.dictType === 'DEDUCTION_METHOD');
                    this.dictInfo.agencyChargingMethod = returnData.filter(item => item.dictType === 'CHARGING_METHOD');
                    this.dictInfo.PaymentMethod = returnData.filter(item => item.dictType === 'PaymentMethod');
                    this.dictInfo.currency = returnData.filter(item => item.dictType === 'FEE');
                    this.dictInfo.sfbz = returnData.filter(item => item.dictType === 'PAY_COLLECT_FLAG');
                    this.dictInfo.bustype = returnData.filter(item => item.dictType === 'BUSINESS_TYPE');
                    this.dictInfo.formsOfCommerce = returnData.filter(item => item.dictType === 'TRADE_TYPE');
                    this.dictInfo.transStatus = returnData.filter(item => item.dictType === 'TRANS_STATUS');
                    this.dictInfo.billType = returnData.filter(item => item.dictType === 'BILL_TYPE');
                    this.dictInfo.chargeStatus = returnData.filter(item => item.dictType === 'CHARGE_STATUS');
                    this.dictInfo.damagedSign = returnData.filter(item => item.dictType === 'DAMAGED_SIGN');
                    this.dictInfo.circulationType = returnData.filter(item => item.dictType === 'CIRCULATION_STATUS');
                    this.dictInfo.paymentStatus = returnData.filter(item => item.dictType === 'PAYMENT_STATUS');
                    this.dictInfo.tranType = returnData.filter(item => item.dictType === 'CIRCULATION_TYPE');
                    this.dictInfo.billStatus = returnData.filter(item => item.dictType === 'BILL_STATUS');
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).catch(err => {
                console.log(err);
            });
        },
        search() {
            this.loading = true;
            this.tableData.filterList = [];
            if (this.searchForm.purchasingAgreementCode) {
                this.tableData.filterList.push({
                    filterKey: 'purchasingAgreementCode',
                    filterValue: this.searchForm.purchasingAgreementCode
                });
            }
            if (this.searchForm.entrustedEnterprise) {
                this.tableData.filterList.push({
                    filterKey: 'entrustedEnterprise',
                    filterValue: this.searchForm.entrustedEnterprise
                });
            }
            if (this.searchForm.contractValidityPeriod) {
                this.tableData.filterList.push({
                    filterKey: 'contractValidityPeriodStart',
                    filterValue: this.searchForm.contractValidityPeriod[0] ? this.$utils.dateToDateStr(this.searchForm.contractValidityPeriod[0]) : null
                });
                this.tableData.filterList.push({
                    filterKey: 'contractValidityPeriodEnd',
                    filterValue: this.searchForm.contractValidityPeriod[1] ? this.$utils.dateToDateStr(this.searchForm.contractValidityPeriod[1]) : null
                });
            }
            this.initData();
        }
    },
    mounted() {
        this.loading = true;
        this.initData();
        this.getDictData();
        const that = this
        window.onresize = () => {
            return (() => {
                window.screenWidth = document.body.clientWidth
                that.screenWidth = window.screenWidth
            })()
        }

    },
    watch:{
        screenWidth(val){
            if(!this.timer){
                this.timer = true
                let that = this
                setTimeout(function(){
                    console.log($(window).height())
                    that.s_height = $(window).height() - 180;
                    that.timer = false
                },400)
            }
        }
    }
};
</script>

<style lang="less">
.order-query {
    .ivu-tooltip-inner {
        background-color: rgba(70, 76, 91, 0.6)!important;
        font-weight: normal!important;
    }
    .ivu-tooltip-arrow {
        border-bottom-color: rgba(70, 76, 91, 0.6)!important;
    }
}
</style>
<style scoped lang="less">
.search-area {
    width: 100%;
    padding: 10px 20px 10px 20px;
    .search-btn {
        background-color: #4f68e8;
        color: #fff;
        width: 40%;
        max-width: 120px;
    }
    .add-btn {
        background-color: #3e4c64;
        color: #fff;
        margin-left: 5%;
        width: 40%;
        max-width: 120px;
    }
}

.content {
    background-color: #f4f7fa;
    padding: 10px 20px 10px 20px;
}
.border-test {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 50px solid transparent;
    border-bottom-color: red;
    border-radius: 50%;
    transform: rotate(45deg);
}
</style>
